<template>
	<div class="new-area-wrap safe-area-bottom">
		<van-nav-bar :title="type == 'gold' ? '积分商城' : type == 'new' ? '物料专区' : type == 'device' ? '收银设备' : ''" left-arrow
			fixed @click-left="onClickLeft" />
		<!-- 轮播区 -->
		<van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
			<van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="handleToParams(item)">
				<img class="banner-li" :src="item.image_url" alt="">
			</van-swipe-item>
		</van-swipe>

		<!-- 筛选区 -->
		<div class="tab-ul">
			<div @click="handleToCurrent(0)" :class="['tab-li', current === 0 ? 'on' : '']">全部</div>
			<div @click="handleToCurrent(1)" :class="['tab-li', current === 1 ? 'on' : '']">销量</div>
			<div @click="handleToCurrent(2)" :class="['tab-li', current === 2 ? `on ${sortStatus}` : 'default']">价格
			</div>
		</div>

		<!-- 商品列表 -->
		<van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
			@load="ajaxGoodList" :immediate-check="false">

			<div v-if="finished && !list.length" class="empty-good">
				<van-empty description="暂无商品" />
			</div>

			<!-- 商品列表 -->
			<div class="good-ul">
				<good-item-ver v-for="(item, index) in list" :key="index" :item="item" />
			</div>

		</van-list>


	</div>
</template>

<script>
import goodItemVer from './components/good-item-ver';
import { CONFIG_DATA, GOOD_LIST } from '@/api/home';
import { bannerToParams } from '@/tool/methods';
export default {
	components: {
		goodItemVer
	},
	data() {
		return {
			type: '',
			current: 0,
			bannerList: [],
			sortStatus: 'default',

			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,
		}
	},
	activated(){
		this.type = this.$route.query.type;
		document.title = this.type == 'gold' ? '积分商城' : this.type == 'new' ? '物料专区' : this.type == 'device' ? '收银设备' : '';
		this.getBanner();
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			if (from.name == 'home' || from.name=='shopSettleVoiceDevice' || from.name==null) {
				vm.resetInit();
			}
		})
	},
	methods: {
		onClickLeft() {
			this.$router.back()
		},
		// 轮播跳转
		handleToParams(item) {
			bannerToParams(item)
		},
		handleToCurrent(index) {
			if (this.current == index && (index == 0 || index == 1)) {
				return
			}

			// 自身时,有排序则改变
			if (this.current == index && index == 2) {
				if (this.sortStatus == 'default') {
					this.sortStatus = 'sortDown';
				} else if (this.sortStatus == 'sortDown') {
					this.sortStatus = 'sortUp';
				} else if (this.sortStatus == 'sortUp') {
					this.sortStatus = 'default';
				}
			}

			this.current = index;


			// 数据请求
			this.resetInit();
		},
		resetInit() { //重置
			this.page = 1;
			this.list = [];
			this.finished = false;

			this.loadingPage = true;
			this.ajaxGoodList()
		},
		// 轮播图
		getBanner() {
			this.$http.get(CONFIG_DATA, {
				params: {
					key: this.type == 'gold' ? 'banner_jfsc' : this.type == 'new' ? 'banner_wlzq' : this.type == 'device' ? 'banner_voice_device' : 'banner_jxhd'
				}
			})
				.then(res => {
					const {
						data
					} = res;

					this.bannerList = data || [];
				})

		},
		// 列表请求
		ajaxGoodList() {
			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;

			if (this.type === 'gold') {
				params['type'] = 12;
			} else if (this.type === 'new') {
				params['type'] = 0;
			} else if (this.type === 'device') {
				params['type'] = 11;
			}


			if (this.current === 0) {
				params['sort_type'] = 1;
			} else if (this.current === 1) {
				params['sort_type'] = 2;
			} else if (this.current === 2) {
				params['sort_type'] = 4;
			}

			if ((this.current == 2) && this.sortStatus != 'default') {
				if (this.sortStatus == 'sortUp') {
					params['sort_rule'] = 1;
				} else if (this.sortStatus == 'sortDown') {
					params['sort_rule'] = 0;
				}
			}

			this.$http.post(GOOD_LIST, params)
				.then(res => {
					const {
						list
					} = res.data;

					if (list && list.length) {
						this.page++;
						this.list = this.list.concat(list);
						// 加载状态结束
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				})
		}
	}

}
</script>

<style lang="scss">
.new-area-wrap {
	min-height: 100vh;
	padding-top: 46px;
	background-color: #fff;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.my-swipe {
		width: 7.02rem;
		margin: auto;

		.banner-li {
			display: block;
			width: 7.02rem;
			height: 2.8rem;
		}
	}

	.tab-ul {
		display: flex;
		height: 0.8rem;
		padding-top: 0.1rem;

		.tab-li {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.28rem;
			font-weight: 400;
			font-size: 0.32rem;
			color: #999999;

			&.on {
				font-weight: 500;
				font-size: 0.32rem;
				color: #1D69E4;
			}

			&.default {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.1rem;
					margin: auto;
					width: 0.14rem;
					height: 0.2rem;
					background: url('../../images/sort-default.png') no-repeat center;
					background-size: cover;
				}
			}

			&.sortDown {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.1rem;
					margin: auto;
					width: 0.14rem;
					height: 0.2rem;
					background: url('../../images/sort-down.png') no-repeat center;
					background-size: cover;
				}
			}

			&.sortUp {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.1rem;
					margin: auto;
					width: 0.14rem;
					height: 0.2rem;
					background: url('../../images/sort-up.png') no-repeat center;
					background-size: cover;
				}
			}
		}
	}


	.good-ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
			padding: 0 0.24rem;
			
			// min-height: 100vh;
		}
}
</style>